<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<data-list ref="list" :loading="isLoad" :enableBackToTop="true" @emptyTo="toIndex()" @load="page"
			@refresh="pageRefresh">
			<view class="">
				<!-- <uni-list-item v-for="(item,index) in record" :index="index" :key="index" :title="item.title"
				:note="item.price" showArrow :thumb="item.face" thumb-size="base" ellipsis="2" rightText=" "
				link="navigateTo" :to="'../orderDetail/orderDetail?id='+item.id" :rightText="item.createTime" /> -->
				<view class="order" v-for="(item,index) in record" :index="index" :key="index" @click="toDetail(item)">
					<view class="top">
						<view class="time">
							{{item.createTime}}
						</view>
						<view class="state">
							{{item.status==0?'待支付':(item.status==1?'待收货':(item.status==2?'待评论':'订单完成'))}}
						</view>
					</view>
					<view class="center">
						<view class="content" v-for="(item1,index1) in item.records" :key="index1">
							<view class="it">
								<view class="imgs">
									<image class="imgs" :src="item1.face||item1.imgs.split(',')[0]" mode=""></image>
								</view>
								<view class="title">
									<view class="">
										{{item1.title}}
									</view>
									<view class="number">
										规格：{{item1.spec}}{{$t.unit(item1.specVal)}}
									</view>
								</view>
							</view>
							<view class="price">
								<view class="">
									￥{{item1.price}}
								</view>
								<view class="number">
									x {{item1.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="total">
							合计：￥{{item.price}}
						</view>
						<view class="tool">
							<view class="">
								<!-- <button
								v-if="item.state==3  ||(item.payState == 1 && new Date().getTime()-new Date(item.createTime).getTime()>1000*60*8)"
								class="but" :plain="true" size="mini">删除订单</button> -->
								<button @click.stop="goPay(item)"
									v-if="item.payState == 1 && new Date().getTime()-new Date(item.createTime).getTime()<1000*60*8"
									class="but1" :plain="true" size="mini">继续支付</button>
								<button
									v-if="item.payState == 1 && new Date().getTime()-new Date(item.createTime).getTime()>=1000*60*8"
									class="" :plain="true" size="mini" :disabled="true">已失效</button>
								<button @click.stop="sureGet(item.id)" v-if=" item.state != 3&&item.payState == 2"
									class="but2" :plain="true" size="mini">确认收货</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</data-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoad: false,
				items: ['全部', '待支付', '待收货', '已收货','订单完成'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text',
				record: [],
				state: "",
				payState: "",
				status: ''
			};
		},
		onLoad(options) {
			// this.query(options.index)
			getOrderList()
			this.current = options.index
		},
		methods: {
			toIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toDetail(item) {
				uni.setStorageSync('orderDetail', item)
				uni.navigateTo({
					url: "/pagesOne/orderDetail/orderDetail?id=" + item.id
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					// this.query(e.currentIndex)
				}
			},
			// pageRefresh(data, callback) {
			// 	this.record = [];
			// 	let page = this.$refs.list.page
			// 	let size = this.$refs.list.size
			// 	this.page(data, callback)
			// },
			// page(data, callback) {
			// 	this.apis.listOrder({
			// 		pageNum: data.page,
			// 		pageSize: data.size,
			// 		status: this.status
			// 		// status: this.payState
			// 	}).then(res => {
			// 		console.log("获取订单列表信息："+res)
			// 		// this.record = [...this.record, ...res.records || []];
			// 		// this.record = [...this.record, ...res.data.list || []];
			// 		this.record = res.data.list;
					
			// 		callback({
			// 			list: this.record,
			// 			total: res.total || 0
			// 		});
			// 	})
			// },
			// query(index) {
			// 	if (index == 0) {
			// 		//全部
			// 		this.state = ""
			// 		this.payState = ""
			// 	} else if (index == 1) {
			// 		//待支付
			// 		this.state = "1"
			// 		this.payState = "1"
			// 	} else if (index == 2) {
			// 		//待收货
			// 		this.state = "1,2"
			// 		this.payState = "2"
			// 	} else if (index == 3) {
			// 		//已收货
			// 		this.state = "3"
			// 		this.payState = "2"
			// 	}
			// 	this.$refs.list.refreshData()
			// },

			// sureGet(id) {
			// 	this.apis.goodsOver({
			// 		id: id
			// 	}).then(res => {
			// 		//确认收货
			// 		this.query(this.current)
			// 	})
			// },
			// goPay(item) {
			// 	debugger
			// 	let res = JSON.parse(item.paypre)
			// 	uni.requestPayment({
			// 		provider: 'wxpay', // 服务提提供商
			// 		timeStamp: res.timeStamp, // 时间戳
			// 		nonceStr: res.nonceStr, // 随机字符串
			// 		package: res.package,
			// 		signType: res.signType, // 签名算法
			// 		paySign: res.sign, // 签名
			// 		success: function(res) {
			// 			console.log('支付成功', res);
			// 			// 业务逻辑。。。
			// 			uni.switchTab({
			// 				url: "/pages/my/my"
			// 			})
			// 		},
			// 		fail: function(err) {
			// 			console.log('支付失败', err);
			// 		}
			// 	})
			// },
			//获取订单列表
			getOrderList() {
				this.apis.listOrder({
					pageNum: data.page,
					pageSize: data.size,
					// status: this.state,
					status: this.payState
				}).then(res => {
					// this.record = [...this.record, ...res.data.list || []];
					this.record = res.data.list
					console.log("获取订单列表信息："+this.record)
					// callback({
					// 	list: this.record,
					// 	total: res.total || 0
					// });
				})
			}
		}
	}
</script>

<style lang="scss">
	.order {
		display: flex;
		padding: 10px;
		flex-direction: column;
		border-top: 5px solid #efefef;
		border-bottom: 5px solid #efefef;
	}

	.top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 7px 0px;
		position: relative;
	}

	.top::after {
		position: absolute;
		bottom: 0;
		left: -10px;
		content: '';
		border-bottom: 1px solid #efefef;
		width: 120%;
	}

	.center {
		padding: 7px 0px;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.center::after {
		position: absolute;
		bottom: 0;
		content: '';
		border-bottom: 1px solid #efefef;
		width: 100%;
	}

	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 5px 0px;
	}

	.it {
		display: flex;
		flex-direction: row;
		flex: 4;
	}

	.title {
		margin-left: 5px;
	}

	.price {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-weight: bold;
		font-family: none;
	}

	.number {
		margin-top: 3px;
		color: #bcbcbc;
		font-weight: 100;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.total {
		font-weight: bold;
		font-family: none;
		margin: 10px 0px;
	}

	.but {
		border-radius: 15px !important;
		margin-left: 10px !important;
	}

	.but1 {
		border-color: #ff0000 !important;
		border-radius: 15px !important;
		color: #ff0000 !important;
		margin-left: 10px !important;
	}

	.but2 {
		border-color: #FF9800 !important;
		border-radius: 15px !important;
		color: #FF9800 !important;
		margin-left: 10px !important;
	}
</style>
